<template>
	<view class="content">
		<!-- <nav-header /> -->
		<view class="tab-card flex-row-start" :style="{top: `${getTop()}`}">
			<view 
				v-for="tab in tabs" 
				:key="tab.id"
				class="tab-item" 
				:class="{'tab-item-active': tabId === tab.id}" 
				@click="setTabId(tab.id)"
			>
				{{tab.name}}
			</view>
		</view>
		<view class="list-card-wrap" style="margin-top: 96rpx;">
			<view 
				v-for="(item, index) in tableData" 
				:key="item.taskCode || index" 
				class="list-card" 
				@click="toPage(item)"
			>
				<view class="flex-row-between">
					<view class="flex-row">
						<text class="gray-text">AGV任务编号</text>
						<text class="black-text-30 ml-20">{{item.taskCode}}</text>
					</view>
				</view>

				<view class="flex-row-between">
					<view class="flex-row">
						<text class="gray-text">料&ensp;架</text>
						<text class="black-text-30 ml-20">{{item.shelfNo}}</text>
					</view>
					<view class="flex-row">
						<text class="gray-text text-right" style="width: 120rpx;">托&ensp;盘</text>
						<text class="black-text-30 ml-20" style="width: 160rpx;">{{item.trayNo}}</text>
					</view>
				</view>

				<view class="flex-row-between">
					<view class="flex-row">
						<text class="gray-text">起&ensp;点</text>
						<text class="black-text-30 ml-20">{{item.startPosition}}</text>
					</view>
					<view class="flex-row">
						<text class="gray-text text-right" style="width: 120rpx;">终&ensp;点</text>
						<text class="black-text-30 ml-20" style="width: 160rpx;">{{item.endPosition}}</text>
					</view>
				</view>

				<template v-if="tabId === 1">
					<view class="flex-row-between">
						<text class="gray-text">创建时间 {{item.createTime}}</text>
						<view class="flex-row">
							<view @click.stop="completeTask(item)" class="botton p-botton">完成</view>
						</view>
					</view>
				</template>

				<template v-else>
					<view class="flex-row-between">
						<text class="gray-text">创建时间</text>
						<text class="gray-text">{{item.createTime}}</text>
					</view>
					<view class="flex-row-between">
						<text class="gray-text">完成时间</text>
						<text class="gray-text">{{item.updateTime}}</text>
					</view>
				</template>
			</view>

			<list-footer :total="total" :dataLength="tableData.length" />
		</view>
	</view>
</template>

<script>
	import { getDict,getTop } from '@/utils/common.js'
	import {
		agvTaskDispatch,
		complete,
		agvCallback
	} from "./api"
	var printModule = uni.requireNativePlugin("pda-print-PdaPrintModule")
	export default {
		name: 'AgvTaskList',
		data() {
			return {
				getTop,
				// 遮罩层
				loading: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					no: '',
					searchFinish: 'N'
				},
				total: 0,
				searchValue: '',
				tabId: 1,
				tableData: [],
				erpStockStatus:[],
				getDict,
				tabs: [
					{ id: 1, name: '未完成' },
					{ id: 2, name: '已完成' }
				]
			}
		},
		computed: {
			isCompleted() {
				return this.tabId === 2
			}
		},
		onNavigationBarSearchInputChanged({ text }) {
			if (!text) {
				this.queryParams.no = ''
				this.refreshList()
			}
		},
		onNavigationBarSearchInputConfirmed({ text }) {
			this.queryParams.no = text
			this.refreshList()
		},
		// 上拉加载
		onReachBottom() {
			if (this.tableData.length >= this.total || this.loading) return
			this.queryParams.pageNum++
			this.getList()
		},
		onLoad() {
			this.initializeData()
		},
		onUnload(){
			uni.$off('refreshList')
		},
		methods: {
			async initializeData() {
				uni.$on('refreshList', this.refreshList)
				await this.getDicts("erp_stock_status")
				this.getList()
			},
			async getDicts(dictType) {
				try {
					const res = await getDict(dictType)
					this.erpStockStatus = res.data
				} catch (error) {
					this.$modal.msgError('获取字典数据失败')
				}
			},
			toPage(item) {
				if (this.isCompleted) {
					this.toDetail(item)
				}
			},
			setTabId(tabId) {
				this.tabId = tabId
				this.queryParams.searchFinish = tabId === 2 ? 'Y' : 'N'
				this.refreshList()
			},
			clearForm() {
				this.form = {
					batchNo: '',
					storehouseLocationNo: '',
					productNo: '',
					productName: '',
					quantity: ''
				}
			},
			refreshList(){
				this.tableData = [];
				this.total = 0;
				this.queryParams.pageNum = 1;
				this.getList();
			},
			async getList() {
				if (this.loading) return
				
				this.loading = true
				uni.showLoading({ title: '加载中...' })

				try {
					const res = await agvTaskDispatch(this.queryParams)
					this.tableData = this.tableData.concat(res.rows)
					this.total = res.total
				} catch (error) {
					this.$modal.msgError('获取数据失败')
				} finally {
					this.loading = false
					uni.hideLoading()
				}
			},
			// callRequst(){
			// 	agvCallback(params).then
			// },
			// 完成收货任务
			async completeTask(item) {
				try {
					const confirmed = await this.$modal.confirm('是否确认完成？')
					if (!confirmed) return

					const outbinRes = await agvCallback({
						ReceiveTaskID: item.taskCode,
						method: "OUTBIN"
					})

					if (outbinRes.code !== 0) {
						throw new Error(outbinRes.msg)
					}

					const endRes = await agvCallback({
						ReceiveTaskID: item.taskCode,
						method: "END"
					})

					if (endRes.code !== 0) {
						throw new Error(endRes.msg)
					}

					this.$modal.msgSuccess("操作成功")
					setTimeout(this.refreshList, 1000)
				} catch (error) {
					console.log(error)
					this.$modal.confirmClose(error.msg || '操作失败')
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.content {
		// margin: 17rpx 25rpx;
	}
	.flex-row{
		margin-bottom: 15rpx;
	}
	.ml-20 {
		margin-left: 20rpx;
	}
	.text-right {
		text-align: right;
	}
</style>
